<template>
  <div>
    <form>
      账号: <input type="text" v-model="account.username">
      密码: <input type="password" v-model="account.password">
    </form>
    
    <form>
      账号: <input type="text" v-model="username">
      密码: <input type="password" v-model="password">
    </form>
    <hr/>
    <show-info name="why" :age="18"></show-info>
  </div>
</template>

<script>
  import { onMounted, reactive, ref } from 'vue'
  import ShowInfo from "./ShowInfo.vue";
  export default {
    components:{
      ShowInfo
    },
    data(){
      return{
        message:"Hello World"
      }
    },
    setup() {
      // 定义响应式数据: reactive/ref
      // 强调: ref也可以定义复杂的数据
      const info = ref({})
      console.log(info.value)

      // 1.reactive的应用场景
      // 1.1.条件一: reactive应用于本地的数据
      // 1.2.条件二: 多个数据之间是有关系/联系(聚合的数据, 组织在一起会有特定的作用)，比如username和password组合在一起才是用户的账号。
      const account = reactive({
        username: "coderwhy",
        password: "1234567"
      })

      // 这么做是不合理的，不是不能这么用
      const username = ref("coderwhy")
      const password = ref("123456")

      // 2.ref的应用场景: 其他的场景基本都用ref(computed)
      // 2.1.定义本地的一些简单而又独立的数据
      const message = ref("Hello World")
      const counter = ref(0)

      // 2.定义从网络中获取的数据也是使用ref
      // const musics = reactive([])
      const musics = ref([])
      onMounted(() => {
        // 假如这是从服务器里拿到的数据
        const serverMusics = ["海阔天空", "小苹果", "野狼"]
        // musics是reactive([])，也就是一个响应式的数据，里面必须要有数据，而此时是一个空数据，获取到serverMusics后，你要去musics的哪些数据？所以我们使用ref。
        musics.value = serverMusics
      })

      return {
        account,
        username,
        password
      }
    }
  }
</script>

